import { View } from "@tarojs/components";
import { getCurrentPages, navigateBack, useDidShow } from "@tarojs/taro";
import { useState } from "react";
import { Icon } from "@/components";
import { subPages } from "@/data/pages/pagesData";
import { SubPagesUrls } from "@/data/pages/pagesTypes";
import { switchTab } from "@/utils/navigation";
import style from "./index.module.scss";
import { useApplicationInfo } from "@/store/applicationDataContext";

interface NavigationBarProps {
  height: number;
  paddingTop: number;
  paddingBottom: number;
}

const NavigationBar = ({
  height,
  paddingTop,
  paddingBottom,
}: NavigationBarProps) => {
  const [showback, setShowback] = useState(false);
  const [showHome, setShowHome] = useState(false);

  useDidShow(() => {
    const currentPages = getCurrentPages();
    const route = currentPages[0].route as SubPagesUrls;
    if (route) {
      const hasPageStack = currentPages.length > 1;
      const noVisibleTabbar = subPages.includes(route);
      if (hasPageStack) {
        setShowback(true);
      } 
      // else {
      //   setShowHome(true);
      // }
      // Case: deep link access, can't navigate out
      if (!hasPageStack && noVisibleTabbar) {
        setShowHome(true);
      }
    }
  });

  return (
    <View
      className={style["navigation-bar"]}
      style={{ height, paddingTop, paddingBottom }}
    >
      <View className={style.content}>
        {showback && (
          <Icon
            type="BackNav"
            className={style["back-nav"]}
            onClick={() => {
              navigateBack();
            }}
          />
        )}
        {showHome && (
          <Icon
            type="HomeBorder"
            className={style["home-nav"]}
            onClick={() => {
              switchTab("pages/home/index");
            }}
          />
        )}
        <Icon type="LEcoleLogo" className={style.logo} />
      </View>
    </View>
  );
};

export default NavigationBar;
